<template>
  <div class="home-container" v-loading.fullscreen.lock="loading">
    <navbar :showHeaderIcon="true" />
    <div class="container">
      <div class="page-card">
        <div class="page-form">
          <el-select
            v-model="queryParams.reportEnabled"
            placeholder="状态"
            clearable
            @change="handleSearch"
          >
            <el-option label="上报中" value="1"></el-option>
            <el-option label="已截止" value="2"></el-option>
          </el-select>

          <el-input
            v-model="queryParams.schoolName"
            placeholder="学校名称"
            clearable
            @input="handleSearch"
          />
        </div>
      </div>

      <div class="list m-top">
        <Empty v-if="!loading && tableData.length == 0" />
        <div class="item" v-for="item in tableData" :key="item.id">
          <div class="item-left">
            <div class="item-title">{{ item.schoolName }}</div>
            <div class="item-info">
              <el-tag>{{ xmxx.selectTypeName }}</el-tag>
              <el-tag>{{
                selectDictLabel(dict.type.grade, xmxx.grade)
              }}</el-tag>
            </div>
            <div class="item-time">
              上报截止时间：{{ item.reportCloseTime }}
            </div>
          </div>

          <div class="item-right">
            <template v-if="item.reportEnabled == 1">
              <div>
                <el-button
                  type="success"
                  @click="
                    $router.push({
                      path: '/lksb/lksbxq',
                      query: { activeTab: 'pyjsgl', id: item.id },
                    })
                  "
                  >教师信息</el-button
                >
              </div>
              <div style="margin-top: 15px">
                <el-button
                  type="primary"
                  @click="
                    $router.push({
                      path: '/lksb/lksbxq',
                      query: { activeTab: 'ksgl', id: item.id },
                    })
                  "
                  >学生信息</el-button
                >
              </div>
            </template>
            <div v-else>
              <el-button type="info">上报已截止</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="page-bottom">
      <div class="page-bottom-content">
        <span class="total">共{{ total }}条数据</span>
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { systemExamSchoolReportList } from "@/api/xmgl/lksb";
import { debounce } from "lodash";
import { Navbar } from "@/layout/components";
export default {
  components: {
    Navbar,
  },
  dicts: ["grade"],
  data() {
    return {
      xmxx: {},

      total: 0,
      tableData: [],
      loading: false,
      queryParams: {
        pageNum: 1,
        pageSize: 15,
      },
    };
  },
  created() {
    this.$store.dispatch("getXmxx").then((res) => {
      this.xmxx = res;
      this.getList();
    });
  },
  methods: {
    debouncedSearch: debounce(function () {
      this.queryParams.pageNum = 1;
      this.getList();
    }, 500),
    handleSearch() {
      this.debouncedSearch();
    },

    getList() {
      this.loading = true;
      this.tableData = [];
      systemExamSchoolReportList({
        ...this.queryParams,
        examId: this.xmxx.id,
      })
        .then((response) => {
          this.total = response.total;
          this.tableData = response.rows;
        })
        .finally(() => {
          this.loading = false;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 1200px;
  margin: 14px auto;

  .page-form {
    padding-bottom: 0;
  }

  .item {
    &.item {
      margin-top: 20px;
    }

    display: flex;
    padding: 24px;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    background: #ffffff;

    .item-title {
      font-size: 18px;
      color: #2a303b;
      line-height: 18px;
      font-weight: bold;
    }

    .item-info {
      margin-top: 14px;
      .el-tag + .el-tag {
        margin-left: 10px;
      }
    }

    .item-time {
      margin-top: 14px;
      font-size: 14px;
      color: #5b6371;
      line-height: 22px;
    }
  }
}
.page-bottom {
  width: 100vw;
  background: #ffffff;
  box-shadow: 0 4px 16px 0 #5572921a;
  height: 50px;
  justify-content: center;
  position: fixed;
  bottom: 0;
  left: 0;

  .page-bottom-content {
    width: 1200px;
    display: flex;
    justify-content: space-between;
    align-content: center;

    .total {
      font-size: 14px;
      line-height: 32px;
    }
    .pagination-container {
      margin: 0;
    }
  }
}
</style>